<template>
  <div>
      <div style="color: aliceblue;margin-top: 10px;font-weight: 700;font-size: 17px;margin-bottom: 10px;">【月份生产数量】</div>
       <div ref="myDiv" class="radar-echart" />
  </div>
</template>

<script>
import * as echarts from 'echarts/core';
import { GridComponent,TooltipComponent  } from 'echarts/components';
import { BarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { PictorialBarChart } from 'echarts/charts';

echarts.use([GridComponent, BarChart, CanvasRenderer,TooltipComponent,PictorialBarChart]);

export default {
name: 'Histogram',
// 页面渲染完毕事件
mounted() {
  const myChart = echarts.init(this.$refs.myDiv) // 得到图表实例
  myChart.setOption({
        // backgroundColor: '#071e57',
        color: [
          '#63caff',
          '#49beff',
          '#03387a',
          '#03387a',
          '#03387a',
          '#6c93ee',
          '#a9abff',
          '#f7a23f',
          '#27bae7',
          '#ff6d9d',
          '#cb79ff',
          '#f95b5a',
          '#ccaf27',
          '#38b99c',
          '#93d0ff',
          '#bd74e0',
          '#fd77da',
          '#dea700'
        ],
        grid: {
          containLabel: true,
          left: 20,
          right: 20,
          bottom: 10,
          top: 50
        },
        xAxis: {
          axisLabel: {
            show: true,
            color: '#fff',
            fontSize: 14,
            interval: 0
          },
          axisTick: {
            lineStyle: {
              color: '#384267'
            },
            show: true
          },
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#384267',
              width: 1,
              type: 'dashed'
            },
            show: true
          },
          data: ['2024-04','2024-04','2024-04','2024-04','2024-04','2024-04'],
          // this.orderquantity.map(item => ({
          //   value: item.month
          // })),
          type: 'category'
        },
        yAxis: {
          axisLabel: {
            show: true,
            color: '#fff',
            fontSize: 14
          },
          axisTick: {
            lineStyle: {
              color: '#384267',
              width: 1
            },
            show: true
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#384267',
              type: 'dashed'
            }
          },
          axisLine: {
            lineStyle: {
              color: '#384267',
              width: 1,
              type: 'dashed'
            },
            show: true
          },
          name: ''
        },
        series: [
          {
            data: '123123',
            //  this.orderquantity.map(item => ({
            //   // name: item.month,
            //   value: item.total_num
            // })),
            type: 'bar',
            barMaxWidth: 'auto',
            barWidth: 30,
            itemStyle: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: 'linear',
                global: false,
                colorStops: [
                  {
                    offset: 0,
                    color: '#0b9eff'
                  },
                  {
                    offset: 1,
                    color: '#63caff'
                  }
                ]
              }
            },
            label: {
              show: true,
              position: 'top',
              distance: 10,
              color: '#fff'
            }
          },
          {
            data: '123123',
            // this.orderquantity.map(item => ({
            //   // name: item.month,
            //   value: item.total_num
            // })),
            type: 'pictorialBar',
            barMaxWidth: '20',
            symbolPosition: 'end',
            symbol: 'diamond',
            symbolOffset: [0, '-50%'],
            symbolSize: [30, 12],
            zlevel: 2
          }
        ],
        tooltip: {
          trigger: 'axis',
          show: false
        }
  })
}
}
</script>

<style scoped>
.radar-echart {
  margin-left: 10px;
  width: 97%;
  height: 350px;
}

</style>